﻿<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>服务订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="orderList" ref="orderList">
      <!-- 日期时间选择 -->
      <div style="width:100%;height:10px;background-color:##EBEEF1"></div>
      <div class="searchBar">
        <div class="dateTimePack marginRight">
          <span style="font-size:14px;">时间范围：</span>
          <el-date-picker v-model="rangeDateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" align="right" prefix-icon="el-icon-date" clear-icon="el-icon-close" :editable="false">
          </el-date-picker>
        </div>
        <!-- 订单状态选择 -->
        <div class="orderStatus marginRight">
          <span>订单状态：</span>
          <el-select v-model="orderStatus" placeholder="请选择">
            <el-option v-for="(item, index) in orderStatusOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 支付方式 -->
        <div class="payMds marginRight">
          <span>支付方式：</span>
          <el-select v-model="payMd" placeholder="请选择">
            <el-option v-for="(item, index) in payMdsOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 订单来源 -->
        <div class="orderResoces marginRight">
          <span>订单来源：</span>
          <el-select v-model="orderResoces" placeholder="请选择">
            <el-option v-for="(item, index) in orderResocesOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 城市 -->
        <div class="city marginRight">
          <span>城市：</span>
          <el-select v-model="city" placeholder="请选择">
            <el-option v-for="(item, index) in cityOptions" :key="index" :label="item.cityName" :value="item.cityCode">
            </el-option>
          </el-select>
        </div>
        <!-- 商圈 -->
        <div class="city marginRight">
          <span>商圈：</span>
          <el-select v-model="market" placeholder="请选择" :disabled="city === ''">
            <el-option v-for="(item, index) in marketOptions" :key="index" :label="item.businessAreaName" :value="item.businessAreaCode">
            </el-option>
          </el-select>
        </div>
        <!-- 用户信息 -->
        <div class="userSearch" style="margin-bottom:5px;">
          <el-select v-model="userSearch" placeholder="请选择">
            <el-option v-for="(item, index) in userSearchOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="searchValue" :placeholder="placeholder"></el-input>
          <!-- <el-button icon="el-icon-search" @click="searchForUserInformation"></el-button> -->
        </div>
        <div class="goodsType">
          <span>商品类型：</span>
          <el-select v-model="orderItemType" placeholder="请选择">
            <el-option v-for="(item, index) in goodsTypeOptions" :key="index" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </div>
        <div class="goodsType">
          <span>支付状态：</span>
          <el-select v-model="payStatus" placeholder="请选择">
            <el-option label="未支付" :value="'0'"></el-option>
            <el-option label="已支付" :value="'1'"></el-option>
          </el-select>
        </div>
        <!-- <div class="goodsType" style="margin-left:0px;margin-right:10px">
          <span>订单类型：</span>
          <el-select v-model="catalogue" placeholder="请选择">
            <el-option label="运营录单" :value="'0'"></el-option>
            <el-option label="用户下单" :value="'1'"></el-option>
          </el-select>
        </div> -->
        <div>
          <el-button class="export" @click="searchClick" style="background-color:#fd804c;color: #fff;">查询</el-button>
        </div>
        <!-- <div style="margin-left:15px;">
          <el-button class="export" @click="valet" style="background-color:#fd804c;color: #fff;">代客录单
          </el-button>
        </div> -->
        <div style="margin-left:15px;">
          <el-button class="export" @click="downloadNew" style="background-color:#fd804c;color: #fff;">导出</el-button>
        </div>
        <div style="margin-left:15px;">
          <el-button class="export" @click="clear" type="warning">清除</el-button>
        </div>
      </div>
      <!-- 列表头 -->
      <serve-top></serve-top>
      <!-- 列表list -->
      <serve-list :list="paginationList"></serve-list>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="list.length > 0">
      <div class="left"></div>
      <div class="right">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  orderStatusOptions,
  payMdsOptions,
  orderResocesOptions,
  userSearchOptions,
  goodsTypeOptions
} from "./mockData";
import { orderListMap } from "./mockData";
import moment from "moment";
import serveTop from "./serveTop.vue";
import serveList from "./serveList.vue";
// scv文件导出
import { download } from "../../utils/exportCsv";
export default {
  components: { serveTop, serveList },
  data () {
    const cityOptions = [{ cityCode: "", cityName: "全部" }];
    const marketOptions = [{ businessAreaCode: "", businessAreaName: "全部" }];
    return {
      goodsTypeOptions, // 商品类型枚举
      orderStatusOptions, // 状态枚举
      payMdsOptions, // 支付枚举
      orderResocesOptions, // 来源枚举
      userSearchOptions, // 查询用户信息枚举
      cityOptions, //城市枚举
      marketOptions, //商圈枚举
      orderStatus: "",
      rangeDateTime: ["", ""],
      payMd: "",
      orderResoces: "",
      city: "",
      market: "",
      userSearch: 0,
      catalogue: '',
      searchValue: "",
      list: [],
      paginationList: [], // 分页列表
      // 分页数据
      pagination: {
        currentPage: 1, //当前页
        pageSize: 20, // 每页条数
        total: 0 // 数据总量
      },
      orderItemType: "", // 商品类型
      payStatus: '', // 支付状态
    };
  },
  computed: {
    placeholder () {
      if (this.userSearch == 0) {
        return "请输入订单编号";
      }
      if (this.userSearch == 1) {
        return "请输入联系人姓名";
      }
      if (this.userSearch == 2) {
        return "请输入联系人手机号";
      }
      if (this.userSearch == 5) {
        return "请输入支付单号";
      }
    }
  },
  methods: {
    valet () {
      this.$router.push({
        path: "/admincreatedorder"
      });
    },
    download () {
      const fields = [
        "订单编号",
        "下单时间",
        "预约时间",
        "订单来源",
        "图片地址",
        "商品名称",
        "订单金额",
        "实付金额",
        "服务人数",
        "城市",
        "商圈",
        "联系人姓名",
        "联系人手机",
        "服务地址",
        "订单状态"
      ];
      const fileName = `订单${moment(new Date()).format(
        "YYYY-MM-DD HH:mm:ss"
      )}.csv`;
      const list = this.list;
      //console.log(this.list[0])
      list.forEach(item => {
        item["订单编号"] = item.orderNo;
        item["下单时间"] = item.createTime;
        item["预约时间"] = item.serviceStartTime;
        if (item.orderSource == "1") {
          item["订单来源"] = "公众号";
        }
        if (item.orderSource == "2") {
          item["订单来源"] = "小程序";
        }
        if (item.orderSource == "3") {
          item["订单来源"] = "APP";
        }
        if (item.orderSource == "4") {
          item["订单来源"] = "H5";
        }
        item["图片地址"] = item.attachUrl;
        item["商品名称"] = item.goodsTitle;
        item["订单金额"] = item.totalAmount;
        item["实付金额"] = item.paymentAmount;
        item["服务人数"] = item.servicePopulation;
        item["城市"] = item.receiverCity;
        item["商圈"] = item.businessAreaName;
        item["联系人姓名"] = item.receiverName;
        item["联系人手机"] = item.receiverMobile;
        item["服务地址"] = item.serviceAddress;
        debugger;
        switch (item.orderStatus) {
          case "1":
            item["订单状态"] = "已取消";
            break;
          case "2":
            item["订单状态"] = "已关闭";
            break;
          case "3":
            item["订单状态"] = "待支付";
            break;
          case "4":
            item["订单状态"] = "待派单";
            break;
          case "5":
            item["订单状态"] = "已派单";
            break;
          case "6":
            item["订单状态"] = "待服务";
            break;
          case "7":
            item["订单状态"] = "待评价";
            break;
          case "8":
            item["订单状态"] = "已完结";
            break;
          case "9":
            item["订单状态"] = "退款中";
            break;
          case "10":
            item["订单状态"] = "已退款";
            break;
        }
      });
      download(list, fields, fileName);
    },
    downloadNew () {
      const searchObj = {
        "0": "orderNo",
        "1": "receiverName",
        "2": "receiverMobile",
        "5": "paySerialId"
      };
      const searchKey = searchObj[this.userSearch];
      let paramsData = {};
      paramsData = {
        startTime: this.rangeDateTime[0]
          ? moment(this.rangeDateTime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        endTime: this.rangeDateTime[1]
          ? moment(this.rangeDateTime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        orderStatus: this.orderStatus,
        paymentMethod: this.payMd,
        orderSource: this.orderResoces,
        receiverCity: this.city,
        businessAreaCode: this.market,
        orderItemType: this.orderItemType,
        paymentStatus: this.payStatus,
        [searchKey]: this.searchValue
      };
      this.$http({
        url: "/hssorderadmin/order/memOrder/exportExcel",
        method: "get",
        responseType: "blob",
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        params: paramsData
      }).then(data => {
        if (!data) return;
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        const fileName = `订单${moment().get("year")}年${moment().get("month") +
          1}月${moment().get("date")}日${moment().get("hours")}时${moment().get(
            "minutes"
          )}分${moment().get("seconds")}秒.xlsx`;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
      });
    },
    searchClick () {
      this.pagination.currentPage = 1;
      this.search();
    },
    search () {
      const searchObj = {
        "0": "orderNo",
        "1": "receiverName",
        "2": "receiverMobile",
        "5": "paySerialId"
      };
      const searchKey = searchObj[this.userSearch];
      const params = {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize,
        startTime: this.rangeDateTime[0]
          ? moment(this.rangeDateTime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        endTime: this.rangeDateTime[1]
          ? moment(this.rangeDateTime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        orderStatus: this.orderStatus,
        paymentMethod: this.payMd,
        orderSource: this.orderResoces,
        receiverCity: this.city,
        businessAreaCode: this.market,
        orderItemType: this.orderItemType,
        paymentStatus: this.payStatus, // 支付状态
        [searchKey]: this.searchValue
      };

      this.$http({
        url: "/hssorderadmin/order/memOrder/fetchOrderList",
        method: "POST",
        data: params
      })
        .then(res => {
          if (res.data.list.length > 0) {
            this.list = res.data.list;
            this.$refs.orderList.removeAttribute("style", "height:100%");
          } else {
            this.list = [];
            this.$refs.orderList.style.height = "100%";
          }
          this.pagination.total = res.data.total;
          this.pagination.currentPage = res.data.pageNum;
          this.paginationList = res.data.list;
        })
        .catch(err => {
          this.$refs.orderList.style.height = "100%";
        });
    },
    // 分页  当前页变化
    handleCurrentChange (val) {
      this.pagination.currentPage = val;
      this.search();
    },
    initData () {
      this.orderStatus = "";
      this.rangeDateTime = ["", ""];
      this.payMd = "";
      this.orderResoces = "";
      this.city = "";
      this.market = "";
      this.userSearch = 0;
      this.searchValue = "";
      this.orderItemType = "";
      this.payStatus = ''
    },
    // 清除搜索条件
    clear () {
      // 精准
      this.userSearch = 0;
      this.searchValue = "";
      // 模糊
      this.rangeDateTime = ["", ""];
      this.orderStatus = "";
      this.payMd = "";
      this.orderResoces = "";
      this.city = "";
      this.market = "";
      this.orderItemType = "";
      this.payStatus = ''
      this.catalogue = ''
    }
  },
  created () {
    // 获取城市map
    this.$http({
      url: "/staffadmin/homeService/staffManager/fetchCityAndBusiness",
      method: "get"
    }).then(res => {
      //console.log(res);
      if (res) {
        this.cityOptions = this.cityOptions.concat(res);
      }
    });
  },
  activated () {
    // 重置初始化数据
    this.initData();
    // 默认查询
    this.search();
  },
  watch: {
    rangeDateTime (newvalue) {
      if (newvalue == null) {
        this.rangeDateTime = ["", ""];
      }
    },
    // payMd () {
    //   this.pagination.currentPage = 1
    //   this.search();
    // },
    // orderResoces () {
    //   this.pagination.currentPage = 1
    //   this.search();
    // },
    city (newValue) {
      if (newValue === "") {
        this.market = "";
      }
      // this.pagination.currentPage = 1
      // this.search();
      // 监听城市的选择 筛选商圈的枚举
      if (newValue) {
        const businessArray = this.cityOptions.find(
          item => item.cityCode === newValue
        ).businessCityInfo;
        if (businessArray) {
          this.marketOptions = [
            { businessAreaCode: "", businessAreaName: "全部" }
          ];
          this.marketOptions = this.marketOptions.concat(businessArray);
          this.market = "";
        }
      }
    }
    // market () {
    //   this.pagination.currentPage = 1
    //   this.search();
    // },
    // orderStatus () {
    //   this.pagination.currentPage = 1
    //   this.search()
    // },
    // orderItemType () {
    //   this.pagination.currentPage = 1
    //   this.search()
    // }
  }
};
</script>
<style lang="scss" scoped>
.marginRight {
  margin-right: 10px;
  margin-bottom: 5px;
}

.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.orderList {
  background-color: #ebeef1;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  .searchBar {
    overflow: hidden;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 15px;
    // height: 90px;
    background-color: white;
    position: relative;
    .searchLeft {
      width: 65%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    /deep/ .el-date-editor .el-range-input {
      width: 130px;
      font-size: 14px;
    }
    /deep/ .el-range-separator {
      width: 24px;
    }
    /deep/ .el-range-editor.el-input__inner {
      width: 320px;
      height: 32px;
      box-sizing: border-box;
      font-size: 14px;
    }
    .orderStatus {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      /deep/ .el-input__inner {
        height: 32px;
        width: 90px;
      }
      /deep/ .el-icon-arrow-up:before {
        position: relative;
        top: -4px;
      }
    }
    .payMds {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      /deep/ .el-input__inner {
        height: 32px;
        width: 90px;
      }
      /deep/ .el-icon-arrow-up:before {
        position: relative;
        top: -4px;
      }
    }
    .orderResoces {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      /deep/ .el-input__inner {
        height: 32px;
        width: 90px;
      }
      /deep/ .el-icon-arrow-up:before {
        position: relative;
        top: -4px;
      }
    }
    .city {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      /deep/ .el-input__inner {
        height: 32px;
        width: 90px;
      }
      /deep/ .el-icon-arrow-up:before {
        position: relative;
        top: -4px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.userSearch {
  display: flex;
  /deep/ .el-input__inner {
    box-sizing: border-box;
    height: 32px;
    border-radius: 0;
    width: 150px;
    border: 1px solid #dcdfe6;
  }
  /deep/ .el-icon-arrow-up:before {
    position: relative;
    top: -4px;
  }
  /deep/ .el-button {
    height: 32px;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    .el-icon-search {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-right: none;
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
/deep/ .export.el-button {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  // margin-left: 70px;
}
span {
  font-size: 14px;
}
</style>
<style lang="scss" scoped>
.pagination {
  height: 48px;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ span.el-checkbox__label {
  display: none;
}
</style>
<style lang="scss" scoped>
.searchRight {
  width: 35%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
/deep/ .goodsType {
  margin-left: 15px;
  .el-select {
    width: 120px;
    height: 32px;
    .el-input--suffix {
      height: 32px;
      .el-input__inner {
        height: 32px;
      }
    }
    .el-select__caret {
      line-height: 32px;
    }
  }
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
